<template>
	<view class="bg">
		<view class="user">
			<image class="avatar" src="../../static/deer.png"style="width: 200rpx;height: 200rpx;" mode=""></image>
			<!-- <view class="name">美食人间</view> -->
			<input class="name" maxlength="6" style="white-space: nowrap;" :value="username" @input="usernameChange"/>
			<image class="forward"src="../../static/forward.png" style="width: 100rpx;height: 100rpx;"@click="logout"></image>
		</view>
		<view class="me">
			<view class="text1">我的订单</view>
			<view class="bt">
				<view class="bt1">
					<view @click="gotoqueue1">
					<image src="../../static/queue2.png" style="height: 150rpx;width: 150rpx;"></image>
					<view class="text">排队</view>
					</view>
				</view>
				<view class="bt1">
					<view @click="gotoreserve1">
					<image src="../../static/reserve2.png" style="height: 150rpx;width: 150rpx;"></image>
					<view class="text">预约</view>
					</view>
				</view>
				<view class="bt1">
					<view @click="gotoorder1">
					<image src="../../static/eat.png" style="height: 150rpx;width: 150rpx;"></image>
					<view class="text">点餐</view>
					</view>
				</view>
			</view>
			<view class="text1">我的应用</view>
			<view class="bt">
				<view class="bt1">
					<view @click="aboutus">
					<image src="../../static/aboutus.png" style="height: 150rpx;width: 150rpx;"></image>
					<view class="text">关于我们</view>
					</view>
				</view>
				<view class="bt1">
					<view @click="contactus">
					<image src="../../static/customer.png" style="height: 150rpx;width: 150rpx;"></image>
					<view class="text">联系客服</view>
					</view>
				</view>
				<view class="bt1">
					<image src="../../static/more.png" style="height: 150rpx;width: 150rpx;"></image>
					<view class="text">敬请期待</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
			data() {
				return {
				};
			},
			methods:{
			  usernameChange(e){
				  const _this = this;
				  const username = uni.getStorageSync('username');
				  const token = uni.getStorageSync('token');
					this.username=e.detail.value
					uni.request({
						url: 'http://10.50.28.38:8080/rename',
						method: 'POST',
						data: {
							newName : _this.username, 
						},
						header: {
							'Content-Type':'application/json',
							Authorization: token
						},						
						success: (res) => {
							uni.setStorage({
								key: 'username',
								data: _this.username,
								success:function(){
									console.log(username);
									console.log("存储用户名到本地成功！");
								}
							})
							uni.setStorage({
								key: 'token',
								data: res.header.authorization,
								success: function () {
									uni.getStorage({
									key: 'token',
										success: function (res) {
											console.log(token);
										}
									});
								}
							});
							},
					fail: () => {console.log("失败")},
						complete: () => {}
					});
				},
				gotoqueue1(){
					uni.navigateTo({
						url:'./queuehistory'
					})
				},
				gotoreserve1(){
					uni.navigateTo({
						url:'./reservehistory'
					})
				},
				gotoorder1(){
					uni.navigateTo({
						url:'./orderhistory'
					})
				},				
				aboutus(){
					uni.showToast({
						title: '全部功能还未完成，敬请期待！',
						icon: 'none',
						duration: 2000
					})
				},
				contactus(){
						uni.showToast({
							title: '欢迎拨打客服热线100000860',
							icon: 'none',
							duration: 2000
						})
						uni.makePhoneCall({
							phoneNumber:100000860
						})
				},
				logout(){
					const token = uni.getStorageSync('token');
						// 询问是否退出登录？
						uni.showModal({
							content:'是否退出登录',
							success:(res) => {
								if (res.confirm) {
									// this.$store.commit('logout')
									uni.setStorage({
										key: 'token',
										data:' ',
										success: function () {
											// uni.getStorage({
											// key: 'token',
											// 	success: function (res) {
													console.log(token);
														
											// 	}
											// });
										}
									});
									uni.showToast({
										title:"退出登录成功",
										icon:'none'
									})
									uni.reLaunch({
										url:'./loginregister'
									})
								}
							}
						})
					},
					onShow() {
								this.username = uni.getStorageSync('username');
					}
			  }
	}
</script>

<style lang="scss">
	.bg{
		width: 100vw;
		height: 100vh;
		background-color:#f3f3f3;
	}
	.user{
		background-color: #ffaa00;
		border-radius: 40rpx;
		box-shadow: 0 0 10rpx 2rpx rgba($color: #333, $alpha: 0.1);
		box-sizing: border-box;
		border:3px solid black;
		display: flex;
		// border: 1px solid #ffaa00;
		height: 400rpx;
		justify-content: space-evenly;
		.avatar{
			background-color: #FFFFFF;
			border:3px solid black;
			border-radius: 50%;
			flex-direction: column;
			margin-top: 100rpx;
			margin-left: 30rpx;
		}
		.name{
			// flex-direction: column;
			// justify-content: center;
			// align-items: center;
			text-align: center;
			// border:3px solid black;
			font-size: 45rpx;
			// margin-left: 100rpx;
			margin-top: 170rpx;
			
		}
		.forward{
			// flex-direction: column;
			// justify-content: center;
			// align-items: center;
			// text-align: center;
			// border:3px solid black;
			margin-left: 100rpx;
			margin-top: 160rpx;
		}
	}
		.bt{
				border-radius: 10rpx;
				box-shadow: 0 0 10rpx 2rpx rgba($color: #333, $alpha: 0.1);
				box-sizing: border-box;
				display: flex;
				// border: 1px solid #ffaa00;
				justify-content: space-evenly;
				.bt1{
					flex-direction: column;
					padding: 30rpx;
				}
				.text{
					text-align: center;
				}
				
			}
		.text1{
			margin-top: 15rpx;
			margin-left: 50rpx;
			color: #999999;
		}
	
</style>
